<template>
    <div class="app-container">
        <!--工具栏-->
        <div class="head-container">
            <div>
                <!-- 搜索 -->
                <el-input
                    v-model="departmentSearch"
                    clearable
                    size="small"
                    placeholder="输入部门名称搜索"
                    style="width: 200px;"
                    prefix-icon="el-icon-search"
                    class="filter-item"
                />
                <!-- 搜索 -->
                <el-input
                    v-model="fuzzySearch"
                    clearable
                    prefix-icon="el-icon-search"
                    size="small"
                    placeholder="输入名称或者邮箱搜索"
                    style="width: 200px;margin-left:10px"
                    class="filter-item"
                />
                <el-date-picker
                    v-model="value2"
                    type="datetimerange"
                    :picker-options="pickerOptions"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    style="margin-left:10px;width:240px"
                >
                </el-date-picker>
                <el-select
                    clearable
                    size="small"
                    placeholder="状态"
                    class="filter-item"
                    style="width:90px;margin-left:10px;"
                    v-model="selectValue"
                    @change="selectChangeValue"
                >
                    <el-option v-for="item in enabledTypeOptions" :key="item.key" :label="item.label" :value="item.key" />
                </el-select>

                <el-button type="primary" style="margin-left:10px;">搜索</el-button>
                <el-button type="info" @click="resetSearch">重置</el-button>
            </div>
        </div>
        <!--新增表单渲染-->
        <el-dialog append-to-body width="570px" title="新增信息" :visible.sync="AddDialogVisible">
            <el-form :inline="true" size="small" ref="addform" :model="addform" label-width="66px" label-position="top" :rules="addRules">
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="addform.username" style="width:400px" />
                </el-form-item>
                <el-form-item label="电话" prop="phone">
                    <el-input v-model="addform.phone" style="width:400px" />
                </el-form-item>
                <el-form-item label="昵称" prop="nickname">
                    <el-input v-model="addform.nickname" style="width:400px" />
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="addform.email" style="width:400px" />
                </el-form-item>

                <el-form-item label="权限" prop="jurisdiction">
                    <el-select v-model="addform.jurisdiction" placeholder="请选择用户权限" style="width:400px">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="性别" prop="gender">
                    <el-radio-group style="width: 178px" v-model="addform.gender">
                        <el-radio label="男">男</el-radio>
                        <el-radio label="女">女</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="状态" prop="enabled">
                    <el-radio-group style="width: 178px" v-model="addform.enabled">
                         <el-radio :label="true">激活</el-radio>
                        <el-radio :label="false">禁用</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="text" @click="resetForm('addform')">取消</el-button>
                <el-button type="primary" @click="submitForm('addform')">确认</el-button>
            </div>
        </el-dialog>

        <!--编辑表单渲染-->
        <el-dialog append-to-body width="570px" title="修改信息" :visible.sync="EditDialogVisible">
            <el-form :inline="true" size="small" ref="editform" :model="editform" label-width="66px" label-position="top">
                <el-form-item label="用户id" prop="userId" v-show="false">
                    <el-input v-model="editform.userId" style="width:400px" :disabled="true" />
                </el-form-item>
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="editform.username" style="width:400px" :disabled="true" /> </el-form-item
                ><el-form-item label="昵称" prop="nickname">
                    <el-input v-model="editform.nickname" style="width:400px" />
                </el-form-item>
                <el-form-item label="电话" prop="phone">
                    <el-input v-model="editform.phone" style="width:400px" />
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="editform.email" style="width:400px" />
                </el-form-item>

                  <el-form-item label="权限" prop="jurisdiction">
                    <el-select v-model="editform.jurisdiction" placeholder="请选择用户权限" style="width:400px">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="性别" prop="gender">
                    <el-radio-group style="width: 178px" v-model="editform.gender">
                        <el-radio label="男">男</el-radio>
                        <el-radio label="女">女</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="状态" prop="enabled">
                    <el-radio-group style="width: 178px" v-model="editform.enabled">
                        <el-radio :label="true">激活</el-radio>
                        <el-radio :label="false">禁用</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="text" @click="resetForm('editform')">取消</el-button>
                <el-button type="primary" @click="submitForm('editform')">确认</el-button>
            </div>
        </el-dialog>

        <el-button type="primary" @click="handleAdd" icon="el-icon-plus" style="margin-top:20px">新增</el-button>
        <el-button type="success" @click="handleEditSelect" icon="el-icon-edit" style="margin-top:20px">修改</el-button>
        <el-button type="danger" @click="handleDeleteSelectMore"  icon="el-icon-delete" style="margin-top:20px">批量删除</el-button>

        <!--表格渲染-->
        <el-table ref="tableform" :data="table" style="width: 100%;margin-top:20px" fit border @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column label="序号" type="index" width="50" :index="computeTableIndex" align="center"> </el-table-column>
            <el-table-column :show-overflow-tooltip="true" label="用户id" v-if="false" prop="userId" />
            <el-table-column :show-overflow-tooltip="true" label="用户名" prop="username" />
            <el-table-column :show-overflow-tooltip="true" label="权限" prop="jurisdiction" />
            <el-table-column :show-overflow-tooltip="true" label="昵称" prop="nickname" />
            <el-table-column :show-overflow-tooltip="true" prop="gender" label="性别" />
            <el-table-column :show-overflow-tooltip="true" label="电话" prop="phone" />
            <el-table-column :show-overflow-tooltip="true" label="邮箱" prop="email" />
            <el-table-column :show-overflow-tooltip="true" label="创建日期" prop="createTime" />
            <el-table-column label="状态" sortable width="100" prop="enabled">
                <template slot-scope="scope">
                    <el-switch
                        v-model="scope.row.enabled"
                        active-color="#13ce66"
                        inactive-color="#ff4949"
                        @change="value => commitStatusChange(value, scope.row)"
                    />
                </template>
            </el-table-column>

            <el-table-column label="操作" width="240px" align="center">
                <template slot-scope="scope">
                    <el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button
                        type="text"
                        icon="el-icon-delete"
                        class="red"
                        style="color:red"
                        @click="handleDelete(scope.$index, scope.row)"
                        >删除</el-button
                    >
                </template>
            </el-table-column>
        </el-table>
        <!--分页组件-->
        <div class="pagination">
            <!-- :current-page="query.FPageIndex"
                    :page-size="query.FPageSize" -->
            <el-pagination
                background
                layout="total, prev, pager, next"
                :current-page="page"
                :page-size="pageSize"
                :total="pageTotal"
                @current-change="handlePageChange"
            ></el-pagination>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        var validateEmailPass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入邮箱'));
            } else {
                const reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
                if (reg.test(value)) {
                    callback();
                } else {
                    return callback(new Error('请输入正确的邮箱'));
                }
            }
        };
        var validatePhonePass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入手机号码'));
            } else {
                const reg = /^[1]([3-9])[0-9]{9}$/;
                if (reg.test(value)) {
                    callback();
                } else {
                    return callback(new Error('请输入正确的手机号'));
                }
            }
        };

        return {
            options: [
                {
                    value: 1,
                    label: '管理员'
                },
                {
                    value: 2,
                    label: '用户'
                }
            ],
            departmentSearch: '',
            fuzzySearch: '',
            selectValue: '',
            page: 1,
            pageSize: 10,
            pageTotal: 0,
            multipleSelection: [],
            EditDialogVisible: false,
            AddDialogVisible: false,
            addform: {
                username: '',
                phone: '',
                nickname: '',
                jurisdiction: '',
                email: '',
                gender: '男',
                enabled: false
            },
            table: [
                {
                    userId: 1,
                    username: 'a',
                    nickname: 'a1',
                    phone: '12345678901',
                    email: '11@qq.com',
                    gender: '女',
                    enabled: true,
                    jurisdiction: '管理员',
                    createTime: '2021-3-2'
                },
                {
                    userId: 2,
                    username: 'b',
                    nickname: 'b1',
                    phone: '12345678901',
                    email: '11@qq.com',
                    gender: '男',
                    enabled: false,
                    jurisdiction: '用户',
                    createTime: '2021-3-2'
                }
            ],
            editform: {
                userId: '',
                username: '',
                phone: '',
                nickname: '',
                email: '',
                gender: '',
                enabled: '',
                jurisdiction:''
            },
            enabledTypeOptions: [
                {
                    label: '激活',
                    key: '0'
                },
                {
                    label: '禁用',
                    key: '1'
                }
            ],

            pickerOptions: {
                shortcuts: [
                    {
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    },
                    {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    },
                    {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }
                ]
            },
            value2: '',
            addRules: {
                username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
                nickname: [{ required: true, message: '请输入昵称', trigger: 'blur' }],
                phone: [{ required: true, validator: validatePhonePass, trigger: 'blur' }],
                email: [{ required: true, validator: validateEmailPass, trigger: 'blur' }],
                jurisdiction: [{ required: true, message: '请选择用户权限', trigger: 'change' }]
            }
        };
    },
    methods: {
        // 改变用户状态
        commitStatusChange(value, user) {
            console.log(value);
            console.log(user);
            if (value) {
                this.$message('状态更改为激活');
            } else {
                this.$message('状态更改为禁用');
            }
        },

        //监听状态选择框
        selectChangeValue(val) {
            console.log(val);
        },

        //新增行信息操作
        handleAdd() {
            this.AddDialogVisible = true;
        },

        //编辑行信息操作
        handleEdit(index, row) {
            // console.log(row);
            this.EditDialogVisible = true;
            this.editform = Object.assign({}, row);
        },
        //删除行信息操作
        handleDelete(index, row) {
            console.log(row);
        },

        //选择框编辑行信息操作
        handleEditSelect() {
            if (this.multipleSelection.length > 1) {
                this.$message.error('请选择不超过一个数量');
            } else if (this.multipleSelection.length < 1) {
                this.$message.error('请选择至少一个数量');
            } else {
                this.EditDialogVisible = true;
                var array = this.multipleSelection;
                for (let i = 0; i < array.length; i++) {
                    const element = array[i];
                    this.editform = Object.assign({}, element);
                }

                console.log(this.editform);
            }
        },
        //选择框是删除行信息操作
        handleDeleteSelect() {
            if (this.multipleSelection.length > 1) {
                this.$message.error('请选择不超过一个数量');
            } else if (this.multipleSelection.length < 1) {
                this.$message.error('请选择至少一个数量');
            } else {
                var array = this.multipleSelection;
                var str = [];
                for (let i = 0; i < array.length; i++) {
                    const element = array[i].userId;
                    str.push(element);
                }
                console.log(str);
            }
        },
        //选择框是批量删除行信息操作
        handleDeleteSelectMore() {
            if (this.multipleSelection.length < 2) {
                this.$message.error('请选择至少两个数量');
            } else {
                var array = this.multipleSelection;
                var str = [];
                for (let i = 0; i < array.length; i++) {
                    const element = array[i].userId;
                    str.push(element);
                }
                console.log(str);
            }
        },

        //重置
        resetForm(forName) {
            this.EditDialogVisible = false;
            this.AddDialogVisible = false;
            this.$refs[forName].resetFields();
        },
        //提交
        submitForm(formName) {
            this.$refs[formName].validate(valid => {
                if (valid) {
                    alert('submit!');
                    console.log(JSON.stringify(this.editform));
                    console.log(JSON.stringify(this.addform));
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        //选择框
        handleSelectionChange(val) {
            this.multipleSelection = val;
            console.log(val);
        },
        // 分页导航
        handlePageChange(val) {
            // this.$set(this.query, 'FPageIndex', val);
            // this.getData();
            console.log(val);
        }, //序号
        computeTableIndex(index) {
            return (this.page - 1) * this.pageSize + index + 1;
        },
        //重置搜索
        resetSearch() {
            this.departmentSearch = '';
            this.fuzzySearch = '';
            this.selectValue = '';
            this.value2 = '';
        }
    }
};
</script>

